<script setup>
import { inject, ref } from 'vue'
//图标
import { IconLock,IconUser,IconEyeClosed,IconEye,IconEditUser,IconHandphone,IconGallery } from '../icon/index.js'
//消息提示工具
import { DlMessageBox } from '../util/messagebox.js'

//引入 api, 以及需要的api函数
import { userRegisterFun } from "../api/user.js";

//主页底部菜单
const menuCore = inject('menuCore');

const pwdLock = ref(true);
const rePwdLock = ref(true);
const registerData = ref({loginName:'', pwd:'', rePwd: '', nickname: '', phone: '', filename: ''});
function doRegister() {
    console.log('registerData:', registerData.value);
    if(!registerData.value.pwd) {
        DlMessageBox.error('请输入密码');
        return;
    }
    if(registerData.value.pwd != registerData.value.rePwd) {
        DlMessageBox.error('两次输入的密码不一致');
        return;
    }
    //获取头像文件
    let file = headFile.value;
    //console.log('params.file=', file);
    if(!file) {
        DlMessageBox.error('请选择头像');
        return;
    }
    //封装注册操作的参数
    // let formData = new FormData();
    // formData.append('loginName', registerData.value.loginName);
    // formData.append('pwd', registerData.value.pwd);
    // formData.append('rePwd', registerData.value.rePwd);
    // formData.append('nickname', registerData.value.nickname);
    // formData.append('phone', registerData.value.phone);
    // formData.append('headImage', file);
    //注册操作

    if(window && window.enableDl) {
        //模拟
        DlMessageBox.success('注册成功');
        menuCore.push('/login');
    } else {
        //请求api函数中已处理了文件上传相关设置
        userRegisterFun(
            registerData.value.loginName,registerData.value.pwd,registerData.value.rePwd,
            registerData.value.nickname,registerData.value.phone,file
        ).then((result)=>{
            console.log('userRegisterFun result:', result);
            if(result.code == 200) {
                //成功后执行以下操作
                //使用服务器返回的消息
                DlMessageBox.success(result.msg);
                menuCore.push('/login');
            } else {
                DlMessageBox.error(result.msg);
            }
        });
    }

}
//头像input
const fileInputRef = ref(null);
const headFile = ref();
function doChangeFile() {
    let files = fileInputRef.value.files;
    //console.log('files:', files);
    if(files.length > 0) {
        let file = files[0];
        console.log('file:', file);
        //限制类型:图片
        if(file.type.startsWith('image')){
            registerData.value.filename = file.name;
            headFile.value = file;
            return;
        }
    }
    registerData.value.filename = '';
    headFile.value = null;
    DlMessageBox.error('请选择图片文件作为头像');
}

function goToLogin() {
    menuCore.push('/login');
}

</script>
<template>
    <div class="view-dl">
        <div class="register-content-dl" >
            <div class="title-dl">注册</div>
            <div class="input-box-dl">
                <IconUser class="left-icon-dl" />
                <input class="input-dl" type="text" placeholder="请输入用户名" v-model="registerData.loginName">
            </div>
            <div class="input-box-dl">
                <IconLock class="left-icon-dl" />
                <input class="input-dl" :type="(pwdLock ? 'password':'text')" placeholder="请输入密码" v-model="registerData.pwd">
                <IconEyeClosed class="right-icon-dl" style="color: #777;" @click="pwdLock=!pwdLock" v-if="pwdLock" />
                <IconEye class="right-icon-dl" @click="pwdLock=!pwdLock" v-else />
            </div>
            <div class="input-box-dl">
                <IconLock class="left-icon-dl" />
                <input class="input-dl" :type="(rePwdLock ? 'password':'text')" placeholder="请输入确认密码" v-model="registerData.rePwd">
                <IconEyeClosed class="right-icon-dl" style="color: #777;" @click="rePwdLock=!rePwdLock" v-if="rePwdLock" />
                <IconEye class="right-icon-dl" @click="rePwdLock=!rePwdLock" v-else />
            </div>
            <div class="input-box-dl">
                <IconEditUser class="left-icon-dl" />
                <input class="input-dl" type="text" placeholder="请输入昵称" v-model="registerData.nickname">
            </div>
            <div class="input-box-dl">
                <IconHandphone class="left-icon-dl" />
                <input class="input-dl" type="text" placeholder="请输入手机号" v-model="registerData.phone">
            </div>
            <div class="input-box-dl">
                <IconGallery class="left-icon-dl" />
                <input class="input-dl" type="text" placeholder="请选择头像" v-model="registerData.filename" readonly @click="fileInputRef.click()">
                <input type="file" class="file-input-dl" ref="fileInputRef" @change="doChangeFile" >
            </div>

            <div class="tools-dl" >
                <div class="register-btn-dl" @click="doRegister">注册</div>
            </div>

            <div style="text-align: right;">
                <div class="link-dl" @click="goToLogin">有账号？去登录</div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.view-dl {
    font-size: 0.4rem;
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(#FBE9D3, #fff);
}
.register-content-dl {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8rem;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 0.2rem;
    padding: 0.4rem;
    box-shadow: 0 0.1rem 0.2rem 0.1rem #ccc;
    color: #333;
}
.title-dl {
    font-size: 1rem;
    font-weight: bold;
    margin: 0 0 0.8rem;
    text-align: center;
}
.input-box-dl {
    position: relative;
    margin: 0.6rem 0;
}
.input-box-dl .left-icon-dl {
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: 50%;
    left: 0.2rem;
    transform: translate(0, -50%);
}
.input-box-dl .right-icon-dl {
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: 50%;
    right: 0.2rem;
    transform: translate(0, -50%);
    cursor: pointer;
    user-select: none;
}
.input-box-dl .input-dl {
    font-size: 0.6rem;
    padding: 0.2rem 1.1rem;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.6rem;
}
.input-box-dl .file-input-dl {
    display: none;
}

.tools-dl {
    text-align: center;
    margin-bottom: 0.4rem;
}
.register-btn-dl {
    font-size: 0.6rem;
    color: #fff;
    background-color: #900000;
    padding: 0.1rem 0.8rem;
    border-radius: 0.6rem;
    display: inline-block;
    cursor: pointer;
    user-select: none;
}
.register-btn-dl:hover {
    background-color: #d00000;
}
.register-btn-dl:active {
    transform: scale(0.9) translateY(5px);
}

.link-dl {
    font-size: 0.4rem;
    color: #999;
    display: inline-block;
    border-bottom: 0.02rem solid #0000ff;
    cursor: pointer;
}

</style>